<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>INCAKE 蛋糕网上订购</title>
	<script src="/lib/jquery/jquery-1.12.4.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/css/base.css">
	<script type="text/javascript" src="/lib/requirejs/require.js" data-main="/js/detail"></script>
	<style type="text/css">
		.active {
			display: inline-block;
		}
		.active img {
			border: 2px solid #e9546b;
		}
		.detail-page{
			position: relative;
			width: 100%;
			background-color: #fff;
		}
		.page-container{
			width: 1200px;
			margin: 40px auto 0;
			padding-bottom: 60px;
			zoom: 1;
		}
		.page-container::after{
			display: block;
			content: "";
			clear: both;
		}
		.product-img{
			float: left;
			width: 540px;
		}
		#gal1{
			padding: 20px 0 30px;
			background-color: #f5f5f5;
		}
		.product-attr{
			position: relative;
			float: right;
			width: 580px;
		}
		.name{
			width: 100%;
			line-height: 40px;
			font-size: 24px;
			color: #45515e;
			zoom: 1;
		}
		.name::after{
			display: block;
			content: "";
			clear: both;
		}
		.name span{
			display: inline-block;
			float: left;
		}
		.name .cn{
			line-height: 40px;
			font-size: 24px;
			color: #45515e;
		}
		.name .en{
			margin-left: 26px;
    		font-size: 20px;
    		line-height: 40px;
    		color: #45515e;
		}
		.desc{
			width: 100%;
			padding: 8px 0 24px;
			color: #b5b5b5;
			border-bottom: 1px dotted #b3a3a3;
		}
		.desc p{
			line-height: 24px;
		}
		.options_container{
			width: 100%;
			padding-top: 24px;
			border-bottom: 1px dotted #b3a3a3;
		}
		.options_container .options{
			position: relative;
			width: 100%;
			margin-bottom: 20px;
			zoom: 1;
		}
		.options::after{
			display: block;
			content: "";
			clear: both;
		}
		.options .title{
			float: left;
			width: 50px;
			line-height: 45px;
			color: #505050;
		}
		.options .section{
			display: flex;
			float: right;
    		width: 520px;
		}
		.section .weight{
			position: relative;
			width: 129px;
			height: 45px;
			margin-bottom: 1px;
    		line-height: 45px;
    		text-align: center;
    		border-left: 1px solid #fff;
    		font-size: 16px;
    		background-color: #f5f5f5;
    		cursor: pointer;
    		border-bottom: 3px solid #f5f5f5;
		}
		.section .weight:hover{
			color: #e9546b;
			border-bottom: 3px solid #e9546b;
		}
		.price_card{
			position: relative;
			float: right;
    		width: 520px;
		    height: 45px;
		    color: #fff;
    		background-color: #e9546b; 
		}
		.price_card::after{
			display: block;
			content: "";
			clear: both;
		}
		.price_card span{
			display: inline-block;
    		line-height: 45px;
		}
		.price_card .price{
			float: left;
			margin-left: 45px;
			font-size: 18px;
		}
		.price i{
			font-size: 28px;
			font-style: normal;
		}
		.price_card .style{
			float: right;
		    margin-right: 66px;
		    font-size: 16px;
		}
		.price_card .icon{
			display: block;
		    position: absolute;
		    top: 11px;
		    right: 25px;
		    width: 24px;
		    height: 24px;
		    background-image: url(/imgs/price_cart_icon.png);
		    background-repeat: no-repeat;
		    background-size: cover;
		    background-position: 50%;
		}
		.tips{
			width: 100%;
			padding: 10px 0;
			border-bottom: 1px dotted #b3a3a3;
			zoom: 1;
		}
		.tips::after{
			display: block;
			content: "";
			clear: both;
		}
		.tips li{
			position: relative;
			float: left;
			width: 290px;
			line-height: 30px;
			color: #b3b3b3;
		}
		.tips li::after{
			display: block;
			position: absolute;
		    top: 11px;
		    left: 11px;
		    width: 8px;
		    height: 8px;
		    content: "";
		    background-image: url(/imgs/point.png);
		    background-repeat: no-repeat;
		    background-size: cover;
		    background-position: 50%;
		}
		.tips li p{
			padding-left: 40px;
		    white-space: nowrap;
		    text-overflow: ellipsis;
		    overflow: hidden;
		}
		.amount_container{
			width: 100%;
			padding: 27px 0;
			zoom: 1;
		}
		.amount_container::after{
			display: block;
			content: "";
			clear: both;
		}
		.amount_title{
			float: left;
			width: 50px;
			height: 35px;
			line-height: 35px;
			color: #505050;
		}
		.amount_content{
			position: relative;
			float: left;
			width: 230px;
			height: 35px;
			zoom: 1;
		}
		.amount_content::after{
			display: block;
			content: "";
			clear: both;
		}
		.amount_content .amount_wrap{
			width: 138px;
			height: 33px;
			margin: 0 auto;
			border: 1px solid #45515e;
		}
		.amount_content .amount_wrap #amount-txt{
			border: none;
		    outline: none;
		    -webkit-appearance: none;
		    width: 138px;
		    height: 33px;
		    line-height: 33px;
		    text-align: center;
		}
		.btn{
			display: block;
			position: absolute;
			top: 5px;
			width: 25px;
			height: 25px;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: 50%;
			border-radius: 50%;
		}
		.amount_content .btn-sub{
			left: 10px;
			background-image: url(/imgs/sub-btn.png);
		}
		.amount_content .btn-add{
			right: 10px;
			background-image: url(/imgs/add-btn.png);
		}
		.more{
			position: relative;
			width: 100%;
			margin-bottom: 55px;
		}
		.more ul{
			width: 100%;
		}
		.more ul li{
			position: relative;
		    width: 100%;
		    padding: 8px 0;
		    border-bottom: 1px dotted #b3a3a3;
		    cursor: pointer;
		    zoom: 1;
		}
		.more ul li::before{
			display: block;
			position: absolute;
		    top: 50%;
		    left: 20px;
		    width: 22px;
		    height: 22px;
		    margin-top: -11px;
		    content: "";
		    background-image: url(/imgs/checkbox.png);
		    background-repeat: no-repeat;
		    background-size: cover;
		    background-position: 50%;
		}
		.more ul li::after{
			display: block;
			content: "";
			clear: both;
		}
		.more_img{
			float: left;
		    display: block;
		    width: 60px;
		    height: 60px;
		    margin-left: 54px;
		    border: 1px solid #dcdcdc;
		}
		.more_img img{
			width: 100%;
			border: none;
    		vertical-align: top;
		}
		.more_txt{
			float: right;
		    width: 448px;
		    height: 62px;
		    zoom: 1;
		}
		.more_txt::after{
			display: block;
			content: "";
			clear: both;
		}
		.more_txt .txt_left{
			position: relative;
			float: left;
			width: 360px;
			height: 100%;
		}
		.more_txt .txt_left .left-child{
			position: absolute;
		    top: 0;
		    right: 0;
		    bottom: 0;
		    left: 0;
		    width: 100%;
		    margin: auto;
		    display: table;
		    text-align: center;
		}
		.more_txt .txt_left .left-child p{
			line-height: 24px;
		    text-align: left;
		    color: #787878;
		}
		.more_txt .more-price{
			display: block;
		    float: right;
		    width: 78px;
		    line-height: 62px;
		    text-align: center;
		    color: #e9546b;
		}
		.button{
			width: 100%;
			zoom: 1;
		}
		.button::after{
			display: block;
			content: "";
			clear: both;
		}
		.button a{
			display: block;
		    float: left;
		    width: 230px;
		    height: 50px;
		    line-height: 50px;
		    text-align: center;
		    border-radius: 2px;
		    font-size: 18px;
		    color: #fff;
		}
		.button .btn-favor{
			width: 40px;
			margin-left: 10px;
		}
		.button .btn-favor .favor-img{
			display: block;
		    width: 40px;
		    height: 34px;
		    background-image: url(/imgs/favor-img.png);
		    background-repeat: no-repeat;
		    background-size: 34px 31px;
		    background-position: 50%;
		}
		.button .btn-favor .favor-txt{
			display: block;
		    width: 100%;
		    line-height: 16px;
		    color: #c8c8c8;
		    font-size: 14px;
		}
		.button .btn-cart{
			margin-left: 20px;
    		background-color: #fb657e;
		}
		.button .btn-buy{
			margin-left: 20px;
    		background-color: #e9546b;
		}
	</style>
</head>
<body>
	<header></header>
		<div class="container_box">
			<script type="text/html" id="detail_template">
			<div class="detail-page">
				<div class="page-container">
					<!-- 放大镜 -->
					<div class="product-img">
						<img src="{{img[0].middle}}" alt="" data-zoom-image="{{img[0].big}}" class="middle-zoom">
						<div id="gal1">
							{{each img curr}}
							<a href="javascript:;" data-image="{{curr.middle}}" data-zoom-image="{{curr.big}}">
								<img src="{{curr.small}}" alt="" class="prod-img">
							</a>
							{{/each}}
						</div>
					</div>
					<!-- 文字介绍 -->
					<div class="product-attr">
						<p class="name">
							<span class="cn">{{cn}}</span><span class="en">{{en}}</span>
						</p>
						<div class="desc">
							<p>{{desc}}</p>
						</div>
						<div class="options_container">
							<div class="options">
								<div class="title">规格： </div>
								<div class="section">
									<div class="weight weig">1.2磅</div>
									<div class="weight">2.2磅</div>
									<div class="weight">3.2磅</div>
									<div class="weight">5.2磅</div>
								</div>
							</div>
							<div class="options">
								<div class="title">款项： </div>
								<div class="price_card">
									<span class="price">￥<i id="price">{{price}}</i></span>
									<span class="style">常规款</span>
									<span class="icon"></span>
								</div>
							</div>
						</div>
						<ul class="tips">
							<li>
								<p class="tip1">常规款14CM*14CM*4.5CM≈6寸，约510g</p>
							</li>
							<li>
								<p class="tip2">免费赠送5份餐具</p>
							</li>
							<li>
								<p class="tip3">蛋糕可切分9块</p>
							</li>
							<li>
								<p class="tip4">至少提前1天预定</p>
							</li>
						</ul>
						<div class="amount_container">
							<div class="amount_title">数量： </div>
							<div class="amount_content">
								<a href="javascript:;" class="btn btn-sub" id="sub"></a>
								<div class="amount_wrap">
									<input type="text" class="amount-txt" value="1" id="amount-txt">
								</div>
								<a href="javascript:;" class="btn btn-add" id="add"></a>
							</div>
						</div>
						<div class="more">
							<ul>
								<li>
									<div class="more_img"><img src="/imgs/more-img.png" alt=""></div>
									<div class="more_txt">
										<div class="txt_left">
											<div class="left-child">
												<p>下午茶缤纷礼盒-订单配送完成后中通快递发货</p>
											</div>
										</div>
										<span class="more-price">¥11.10</span>
									</div>
								</li>
							</ul>
						</div>
						<div class="button">
							<a href="javascript:;" class="btn-favor">
								<span class="favor-img"></span>
								<span class="favor-txt">喜欢</span>
							</a>
							<a href="javascript:;" class="btn-cart">加入购物篮</a>
							<a href="/html/cart.html" class="btn-buy">立即购买</a>
						</div>
					</div>
				</div>
			</div>
			</script>
		</div>
	<footer></footer>
</body>
</html>